/**
* @description: 工单作业详情 
* @author: oahcoay
* @date:
**/
<template>
  <div class="perform-task-main">
    <nav-bar class="header" back title="工单详情" @goBack="goBack"/>

    <van-cell :title="detailInfo.operName +'领取的作业工单'"  :label="detailInfo.receiveTime" class="task-head" >
      <template #right-icon>
        
        <view class="status" style="color:#00BFBF;" v-if="detailInfo.taskState==99">已完成</view>
        <view class="status" style="color:#D9001B;" v-else>未完成</view>
      </template>
    </van-cell>
     <view class="main-container">
      
      <plateTitle title="计划详情" class="plate-title"/>
      <view class="task-info-container" v-if="taskInfoData.length>0">
        <van-cell-group>
          <van-cell v-for="(item,index) in taskInfoData" :key="index" :title="item.title" :value="item.value" />
        </van-cell-group>
      </view>

      <template  v-if="detailInfo.taskState == 99">
        <plateTitle title="作业内容" class="plate-title"/>

        <view v-for="(item, index) in executeData" :key="index" >
          <van-row type="flex" justify="space-between" class="item-title mb20">
            <van-col span="12">{{item.executeName}}</van-col>
          </van-row>
          <div class="work-content" v-for="(v, i) in item.executionTerm" :key="i">
            <!-- 执行照片 -->
            <view class="info-container">
              <van-row type="flex" justify="space-between" class="mb20" v-if="v.executionFileEntity.length>0">
                <van-col span="6">现场照片</van-col>
              </van-row>
              <div class="image-wrap">
                <div class="image-list">
                  <!-- {{v.executionFileEntity[0]}} -->
                  <div
                    class="upload-button"
                    v-for="(imgItem, imgIndex) in v.executionFileEntity"
                    :key="imgIndex"
                    :style="{'background-image': `url(${bgImg})`}"
                  >
                  
                    <img v-if="imgItem.img" :src="imgItem.img" alt="" />
                  </div>
                </div>
              </div>

              <van-divider dashed/>
              <!-- 备注 -->
              <view class="mb20">备注</view>
              <div class="remark-wrap">
                <textarea class="remark-text" v-model="v.notes" placeholder="" disabled>
                </textarea>
              </div>
            </view>

          </div>
        </view>

        <plateTitle title="作业情况" class="plate-title"/>
        <view class="task-info-container mb300">
          <van-cell-group>
            <van-cell title="作业人员" :value="detailInfo.operName" />
            <van-cell title="作业完成时间" :value="detailInfo.tourStartTim" />
          </van-cell-group>
        </view>
      </template>
    </view>
    

  

    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe v-if="currentImgIndex.length>0">
        <div v-for="(image, index) in executeData[currentImgIndex[0]].executionTerm[currentImgIndex[1]].executionFileEntity" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <!-- <div style="width: 100%; text-align: center;">{{ image.previewName }}</div> -->
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </div>
</template>
<script>
import config from "../../../common/config";

import navBar from "../../../components/common/nav-bar";
import plateTitle from '../../../components/business/plateTitle.vue';

import moment from "moment";
import axios from "axios";
import {Dialog, Toast} from "vant";
import {mapGetters} from "vuex";
import { merge } from "lodash";




const fileTemplate = [
  {
    name: "OTHER.jpg",
    // previewName: "其他照片",
    // type: "OTHER",
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
export default {
  name: "taskDetail",
  components: {navBar, plateTitle},
  props: {},
  data() {
    return {
      baseUrl: '', // 基础url
      taskName: '',
      siteName: '',
      tmsTim: '',
      useCarTime: '',
      curObjId: '',
      inletType: 1,
      taskState: 2,

      workCarNum: '',
      tourOperListName: '',
      remark: '',

      detailInfo: {},
      stateArr: {
        1: '待领取',
        2: '未执行', 
        3: '执行中', 
        99: '已完结'
      },
      taskInfoData:[],
      // executionClass: [],
      files: fileTemplate, // 照片map
      executeData: [
        {
          executeName: '封堵',
          isRequired: true,
          executionTerm: [
            {
              executionFileEntity: fileTemplate,
              notes: '',
            }
          ]
        },
        {
          executeName: '光缆',
          isRequired: false,
          executionTerm: [
            {
              executionFileEntity: fileTemplate,
              notes: '',
            }
          ]
        },
        {
          executeName: '遗留隐患处置',
          isRequired: false,
          executionTerm: []
        },
        {
          executeName: '通信设备',
          isRequired: false,
          executionTerm: []
        },
        {
          executeName: '动环设备',
          isRequired: false,
          executionTerm: []
        },
      ],
      delList: [], // 被删除的列表，需要和后台交互
      showPreview: false,

      currentImgIndex: [],
      bgImg: require("../../../static/img/bg_qita.png"),
			imgBase64: ''

    };
  },
  computed: {
    ...mapGetters(["userData"]),
    // taskInfoData:function() {
    //   console.log('用车时间', this.detailInfo, this.detailInfo.useCarStartTime?moment(this.detailInfo.useCarStartTime).format("YYYY-MM-DD HH:mm"):null +'~'+this.detailInfo.useCarEndTime?moment(this.detailInfo.useCarEndTime).format("YYYY-MM-DD HH:mm"):null)
    //   return [
    //     {
    //       title: "工单名称",
    //       value:  this.detailInfo.name
    //     },
    //     {
    //       title: "作业站点",
    //       value: this.detailInfo.taskSiteName
    //     },
    //     {
    //       title: "计划开始时间",
    //       value: this.tmsTim
    //     },
    //     {
    //       title: "计划作业时间",
    //       value: this.detailInfo.tourStartTim?this.detailInfo.tourStartTim:null +'~'+this.detailInfo.tourEndTim?this.detailInfo.tourEndTim:null
    //     },
    //     {
    //       title: "作业人员",
    //       value: this.detailInfo.tourOperListName
    //     },
    //     {
    //       title: "作业车辆",
    //       value: this.detailInfo.workCarNum
    //     },
    //     {
    //       title: "用车时间",
    //       value: this.detailInfo.useCarStartTime?moment(this.detailInfo.useCarStartTime).format("YYYY-MM-DD HH:mm"):null +'~'+this.detailInfo.useCarEndTime?moment(this.detailInfo.useCarEndTime).format("YYYY-MM-DD HH:mm"):null
    //     },
    //      {
    //       title: "备注",
    //       value: this.detailInfo.remark
    //     },
    //   ]
    // }
  },
  watch: {},
  mounted() {
  },
  onLoad(options) {
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.curObjId = options.objId
    this.inletType = options.inletType
    this.$apiRequest.ysbApi.getAutumnInspectionTaskDetailsInfo({objId: options.objId, inletType: options.inletType}).then(res => {
      if (res.data) {
       // 详细信息  
        this.detailInfo = res.data 

        let startTime = res.data.tmsStartTim?moment(res.data.tmsStartTim).format("YYYY-MM-DD HH:mm"):null
        let endTime = res.data.tmsEndTim? moment(res.data.tmsEndTim).format("YYYY-MM-DD HH:mm"):null
        this.tmsTim =  startTime+'~'+endTime

        let uStartTime = this.detailInfo.useCarStartTime?moment(this.detailInfo.useCarStartTime).format("YYYY-MM-DD HH:mm"):null
        let uEndTime = this.detailInfo.useCarEndTime?moment(this.detailInfo.useCarEndTime).format("YYYY-MM-DD HH:mm"):null
        this.useCarTime = uStartTime+'~'+uEndTime  
        
        // this.taskName = res.data.name
        // this.operName = res.data.operName
        // this.siteName = res.data.taskSiteName
        // this.taskState = res.data.taskState
        // this.remark = res.data.remark
        // this.workCarNum = res.data.workCarNum
        // this.tourOperListName = res.data.tourOperListName
         this.taskInfoData = [
        {
          title: "工单名称",
          value:  this.detailInfo.name
        },
        {
          title: "作业站点",
          value: this.detailInfo.taskSiteName
        },
        {
          title: "计划开始时间",
          value: this.tmsTim
        },
        {
          title: "计划作业时间",
          value: this.detailInfo.tourStartTim?this.detailInfo.tourStartTim:null +'~'+this.detailInfo.tourEndTim?this.detailInfo.tourEndTim:null
        },
        {
          title: "作业人员",
          value: this.detailInfo.tourOperListName
        },
        {
          title: "作业车辆",
          value: this.detailInfo.workCarNum
        },
        {
          title: "用车时间",
          value: this.useCarTime
        },
         {
          title: "备注",
          value: this.detailInfo.remark
        },
      ]
        


        this.executeData = JSON.parse(JSON.stringify(res.data.executionClass))
        this.executeData.forEach((item, index)=>{
          item.executionTerm.forEach((item1, index1)=>{
            item1.executionFileEntity.forEach((item2, index2, arr2)=>{
              arr2[index2] = Object.assign({},item2, {
                img: this.baseUrl + item2.furl,
                raw: null,
                name: item2.wjmc,
              })
            })
            
          })
        })
        // this.executeData = res.date.executionClass

      }
    });
  },
  // 组件销毁后清空填写内容（将填写内容初始化为空）
  beforeDestroy() {
  },
  methods: {
    goBack() {
       // 返回待办列表
      uni.navigateTo({
        url: "/pages/acceptanceVersion/orderList/index"
      });
    },
  }
};
</script>
<style scoped lang="scss">
.perform-task-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .task-head {
    box-shadow: 0px 4px 10px #ccc;
    span {
      color: #01a7f0;
    }
    .van-cell__label {
      color: #aaa;
    }
    .status {
      transform: rotate(45deg);
      font-size: 300;
      display: flex;
      align-items: center;
    }
  }
  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }
  
  .main-container {
    height: calc(100vh - #{px2vh(200)});
    padding: px2vh(30) px2vw(30) px2vh(30) px2vw(30);
    overflow: auto;
    .small-img-btn {
      width: px2vw(60);
    }
    .item-title{
      color: #666666;
    }
    .mb20 {
      margin-bottom: px2vh(20);
    }
    .mb300 {
      margin-bottom: px2vh(300);
    }
    .work-content {
      // height: 60vh;
      margin-bottom: px2vh(30);
    }
    
    .plate-title {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    
    .info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      
      /deep/ .van-radio {
        margin-right: px2vw(139.5)
      }
      
      .image-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .upload-button {
          width: px2vw(230);
          height: px2vw(230);
          flex-shrink: 0;
          background-size: 100% px2vw(230);
          margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(60);
          position: relative;
          .delete-icon {
            position: absolute;
            top: px2vw(-20);
            right: px2vw(-20);
            width: px2vw(40);
            height: px2vw(40);
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          img {
            width: px2vw(230);
            height: px2vw(230);
            border-radius: px2vw(6);
          }
        }
      }

      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        
        .remark-text {
          height: px2vh(150);
        }
      }

    }
  }
  footer {
    width: calc(100vw - #{px2vw(60)});
    display: flex;
    .van-button {
      flex: 1;
      margin: px2vh(40) px2vw(40);
      height: px2vh(100);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
  
}
 
</style>